import React, { useMemo } from "react";
import { useSearchParams } from "react-router-dom";
import { Button } from "antd-mobile";
import dayjs from "dayjs";
import styles from "../css/navdata.module.css";

function Index(props) {
  //解构参数
  const { date } = props;

  //获取地址栏参数
  const [sp, setSp] = useSearchParams();
  const spData = useMemo(() => {
    return Object.fromEntries(sp);
  }, [sp]);

  //点击前一天或后一天的事件
  const handelDayEvent = (stemp) => {
    const newdate = dayjs(date).add(stemp, "day").format("YYYY-MM-DD");
    setSp({ ...spData, date: newdate });
  };

  return (
    <div>
      <div className={styles.navDataBox}>
        <Button
          color="primary"
          size="mini"
          fill="none"
          onClick={() => handelDayEvent(-1)}
          disabled={Math.ceil(dayjs(date).diff(dayjs(), "day", true)) <= 0}
        >
          前一天
        </Button>
        <h3>{date}</h3>
        <Button
          color="primary"
          size="mini"
          fill="none"
          onClick={() => handelDayEvent(1)}
          disabled={Math.ceil(dayjs(date).diff(dayjs(), "day", true)) >= 4}
        >
          后一天
        </Button>
      </div>
    </div>
  );
}

export default Index;
